<template>
	<div class="production-report">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addReport">新增报工</el-button>
				<el-select v-model="searchType" placeholder="筛选报工类型" style="width: 180px" clearable>
					<el-option label="首件报工" value="首件报工" />
					<el-option label="巡检报工" value="巡检报工" />
					<el-option label="完工报工" value="完工报工" />
				</el-select>
				<el-input v-model="searchPerson" placeholder="筛选报工人" style="width: 180px; margin-left: 10px"
					clearable />
				<el-input v-model="searchProduct" placeholder="筛选产品名称" style="width: 180px; margin-left: 10px"
					clearable />
			</div>

			<el-table :data="filteredReports" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="reportId" label="报工编号" sortable></el-table-column>
				<el-table-column prop="reportType" label="报工类型" sortable></el-table-column>
				<el-table-column prop="workOrder" label="生产工单" sortable></el-table-column>
				<el-table-column prop="taskName" label="生产任务" sortable></el-table-column>
				<el-table-column prop="productCode" label="产品编码" sortable></el-table-column>
				<el-table-column prop="productName" label="产品名称" sortable></el-table-column>
				<el-table-column prop="reportPerson" label="报工人" sortable></el-table-column>
				<el-table-column prop="reportQuantity" label="报工数量" sortable></el-table-column>
				<el-table-column prop="toCheckQuantity" label="待检测数量" sortable></el-table-column>
				<el-table-column prop="status" label="状态" sortable>
					<template #default="scope">
						<el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">{{ scope.row.status
							}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="140">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editReport(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteReport(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="报工信息" width="600px">
			<el-form :model="currentReport" label-width="120px">
				<el-form-item label="报工编号">
					<el-input v-model="currentReport.reportId" />
				</el-form-item>
				<el-form-item label="报工类型">
					<el-select v-model="currentReport.reportType" placeholder="选择报工类型">
						<el-option label="首件报工" value="首件报工" />
						<el-option label="巡检报工" value="巡检报工" />
						<el-option label="完工报工" value="完工报工" />
					</el-select>
				</el-form-item>
				<el-form-item label="生产工单">
					<el-input v-model="currentReport.workOrder" />
				</el-form-item>
				<el-form-item label="生产任务">
					<el-input v-model="currentReport.taskName" />
				</el-form-item>
				<el-form-item label="产品编码">
					<el-input v-model="currentReport.productCode" />
				</el-form-item>
				<el-form-item label="产品名称">
					<el-input v-model="currentReport.productName" />
				</el-form-item>
				<el-form-item label="报工人">
					<el-input v-model="currentReport.reportPerson" />
				</el-form-item>
				<el-form-item label="报工数量">
					<el-input-number v-model="currentReport.reportQuantity" :min="1" />
				</el-form-item>
				<el-form-item label="待检测数量">
					<el-input-number v-model="currentReport.toCheckQuantity" :min="0" />
				</el-form-item>
				<el-form-item label="规格型号">
					<el-input v-model="currentReport.spec" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="currentReport.remark" type="textarea" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveReport">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const reports = ref([
	{ reportId: 'REP202405001', reportType: '首件报工', workOrder: 'WO1001', taskName: '分装', productCode: 'MED1001', productName: '阿莫西林胶囊', reportPerson: '张三', reportQuantity: 100, toCheckQuantity: 10, remark: '', spec: '0.5g*24粒', status: '进行中' },
	{ reportId: 'REP202405002', reportType: '巡检报工', workOrder: 'WO1002', taskName: '包装', productCode: 'MED1002', productName: '布洛芬片', reportPerson: '李四', reportQuantity: 200, toCheckQuantity: 15, remark: '', spec: '0.2g*100片', status: '已完成' },
	// ...再补充13条，保持结构一致
])

// 添加剩余 13 条数据
for (let i = 3; i <= 15; i++) {
	reports.value.push({
		reportId: `REP2024050${i}`,
		reportType: i % 3 === 0 ? '首件报工' : (i % 3 === 1 ? '巡检报工' : '完工报工'),
		workOrder: `WO100${i}`,
		taskName: '质检',
		productCode: `MED10${i}`,
		productName: `产品${i}`,
		reportPerson: `工人${i}`,
		reportQuantity: 100 + i * 10,
		toCheckQuantity: 5 + i,
		remark: '',
		spec: '规格型号',
		status: i % 2 === 0 ? '已完成' : '进行中'
	})
}

const searchType = ref('')
const searchPerson = ref('')
const searchProduct = ref('')
const dialogVisible = ref(false)
const currentReport = ref({})

// 筛选
const filteredReports = computed(() => {
	return reports.value.filter(r =>
		(!searchType.value || r.reportType.includes(searchType.value)) &&
		(!searchPerson.value || r.reportPerson.includes(searchPerson.value)) &&
		(!searchProduct.value || r.productName.includes(searchProduct.value))
	)
})

// 新增报工
const addReport = () => {
	currentReport.value = { reportId: '', reportType: '', workOrder: '', taskName: '', productCode: '', productName: '', reportPerson: '', reportQuantity: 1, toCheckQuantity: 0, remark: '', spec: '', status: '进行中' }
	dialogVisible.value = true
}

// 编辑报工
const editReport = (row) => {
	currentReport.value = { ...row }
	dialogVisible.value = true
}

// 保存报工
const saveReport = () => {
	if (!currentReport.value.reportId) {
		ElMessage.error('报工编号不能为空')
		return
	}
	const index = reports.value.findIndex(r => r.reportId === currentReport.value.reportId)
	if (index >= 0) {
		reports.value[index] = { ...currentReport.value }
		ElMessage.success('报工已更新')
	} else {
		reports.value.push({ ...currentReport.value })
		ElMessage.success('报工已新增')
	}
	dialogVisible.value = false
}

// 删除报工
const deleteReport = (row) => {
	ElMessageBox.confirm('确认删除该报工记录吗？', '提示', { type: 'warning' })
		.then(() => {
			reports.value = reports.value.filter(r => r.reportId !== row.reportId)
			ElMessage.success('报工已删除')
		})
		.catch(() => { })
}

</script>

<style scoped>
.production-report .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
